// this.canvasSprite = container.getChildByName('canvasSprite')

// 轨迹动画
// let ctx = renderer.plugins.extract.canvas(app.stage).getContext('2d');
// ctx.moveTo(50, 50)
// ctx.lineTo(100, 100)
// ctx.stroke()


// add dom info
// 缩放 位移 旋转 的 位置不变







/*DomSprite*/
/*
import {download_img} from "@/pixi/vue2img";
import * as PIXI from "pixi.js";
import {canvas2Dcontainer} from "@/pixi/canvas2Dcontainer";
import $ from "jquery";
import $bus from '@/utils/mitt'

// import piniaInJs from '@/store/piniaInJs'
import { storeToRefs } from 'pinia';
import  {pixiStore}  from '@/store/pixi'
import {toRaw} from "vue";

let promiseArr = []

export class DomSprite{
    constructor(el) {
        this.el = el
        this.domInit()
    }

    static _updateDom({_x,_y,rotate,x,y,dom}){
        $(dom).css({
            left:x ,
            top:y,
            transformOrigin:'0% 0%',
            transform:`scale(${_x,_y}) rotate(${rotate*57.27923627684964}deg)`  // 360/旋转一圈得到的container.rotation
        })
    }

    static async domDone(){
        await Promise.all(promiseArr)
        canvas2Dcontainer.children.forEach(sprite=>{
            $bus.on('domSprite',(res)=> {
                this._updateDom(res)
            });
        })
    }

    static async create(_params){
        if(_params.length){
            for(let i=0;i<_params.length;i++){
                new DomSprite(_params[i])
            }
            await DomSprite.domDone()

        }

    }

    getDomeSprites(){
        let store = pixiStore()
        let {pixiMaxWidth,pixiMaxHeight,currentWidth,currentHeight } = storeToRefs(store)

        return new Promise(async (resolve, reject) => {
            // download_img
            let {dataURL,canvasres} = await download_img(this.el)
            // 创建一个精灵
            let canvasTexture = await PIXI.Texture.fromURL(dataURL)
            // let canvasTexture =await PIXI.Texture.from(canvasres)
            const canvasSprite = new PIXI.Sprite(canvasTexture);
            // canvasSprite.name = `canvasSprite${index}` 或者 data-x
            canvasSprite.dom = this.el
            // 改变小精灵的宽高 拉伸模式 全部铺满
            // clickSprite.width = 100/1920*currentWidth.value
            // clickSprite.height = 100/1080*currentHeight.value;
            // pixiMaxWidth,pixiMaxHeight,currentWidth,pixiCurrentHeight
            // console.log(el.getAttribute("data-x"))
            // console.log(el.getAttribute("data-y"))
            canvasSprite.x = this.el.getAttribute("data-x")/pixiMaxWidth.value*currentWidth.value - currentWidth.value / 2;
            canvasSprite.y = this.el.getAttribute("data-y")/pixiMaxHeight.value*currentHeight.value - currentHeight.value / 2;
            // 设置精灵的锚点
            canvasSprite.anchor.set(0.5, 0.5);
            canvasSprite.visible = false;
            canvas2Dcontainer.addChild(canvasSprite);
            resolve(true)
        })
    }

    domInit(){
        promiseArr.push(
            this.getDomeSprites()
        )
    }
}
*/

/*DomSpriteBackOver*/



/*MouseControleBack*/
/*

import * as PIXI from "pixi.js";
import {storeToRefs} from "pinia";
import  {pixiStore}  from '@/store/pixi'
import  {useMainStore}  from '@/store/main'

import {canvas2Dcontainer} from "@/pixi/canvas2Dcontainer";
import $bus from '@/utils/mitt'
import {container} from "@/pixi/container";

import { toRaw } from 'vue'

import $ from 'jquery'
// 左键 平移
class Left{
    constructor() {
        this.flag = false;
    }

    setFlag(flag){
        this.flag = flag;
    }

    getFlag(){
        return this.flag
    }

    move(event, mouseControle){
        const dx = event.pageX - mouseControle.startPoint.x;
        const dy = event.pageY - mouseControle.startPoint.y;
        container.x += dx;
        container.y += dy;

        mouseControle.startPoint = { x: event.pageX, y: event.pageY }

        mouseControle.updateDom()
    }

}

// 中键 缩放
class Center{
    constructor() {
        this.flag = false;
    }

    setFlag(flag){
        this.flag = flag;
    }

    getFlag(){
        return this.flag
    }

    move(event, mouseControle){
        const step = event.wheelDelta > 0 ? 0.1 : -0.1
        if (container.scale.x + step >= 0.1) {
            container.scale.x += step
            container.scale.y += step
        }

        mouseControle.updateDom()
    }


}

// 右键 旋转
class Right{
    constructor() {
        const texture = PIXI.Texture.from("textures/bunny.png");
        // 创建一个精灵
        this.sprite = new PIXI.Sprite(texture);

        this.flag = false;

    }

    setFlag(flag){
        this.flag = flag;
    }

    getFlag(){
        return this.flag
    }

    showRotateImg(){
        // 设置精灵的锚点
        this.sprite.anchor.set(0.5, 0.5);
        container.addChild(this.sprite);
    }

    hideRotateImg(){
        // this.sprite.alpha = 0
        container.removeChild(this.sprite);
    }

    move(event, mouseControle){
        let dx = event.pageX - mouseControle.startPoint.x;
        container.rotation += 0.01 * dx ;
        mouseControle.startPoint = { x: event.pageX, y: event.pageY }

        mouseControle.updateDom()
    }

}

// 鼠标控制器
export class MouseControle{
    constructor(showCoord) {
        this.handleDown = this.downfn.bind(this)
        this.handleUp = this.upfn.bind(this)
        this.handleMove = this.movefn.bind(this)
        this.handleWheel = this.wheelfn.bind(this)

        this.showCoord = showCoord
        this.store = pixiStore()

        this.left = new Left()
        this.center = new Center()
        this.right = new Right()

        this.startPoint = {}

        this.down()
        this.move()
        this.up()
        this.wheel()
    }

    down(){
        window.addEventListener("mousedown",this.handleDown)
    }

    // event.button 0  左键   1  中   2   右键
    downfn(event) {
        if(event.button == 0){
            this.left.setFlag(true)
        }
        else if(event.button == 1){
            this.center.setFlag(true)
        }
        else if(event.button == 2){
            this.right.setFlag(true)
        }
        this.startPoint = { x: event.pageX, y: event.pageY }

        // 点击控制台显示坐标
        if(this.showCoord){
            let store = useMainStore()
            let { zoomRatio, zoomRatioW } = storeToRefs(store)
            let PixiDomTop = $('.pixiDom').offset().top;
            let PixiDomLeft = $('.pixiDom').offset().left;
            console.log('屏幕坐标',parseInt(event.pageX/zoomRatioW.value), parseInt(event.pageY/zoomRatio.value) )
            console.log('pixi坐标',parseInt((event.pageX - PixiDomLeft)/zoomRatioW.value), parseInt((event.pageY - PixiDomTop)/zoomRatio.value) )
        }
    }

    move(){
        window.addEventListener("mousemove", this.handleMove)
    }

    movefn(event){
        if(this.left.getFlag()){
            this.left.move(event,this)
        }
        if(this.center.getFlag()) {
            // center键盘按下 move不需要缩放
            // this.center.move(event,this)
        }
        if(this.right.getFlag()) {
            this.right.move(event,this)
            this.right.showRotateImg()
        }

    }

    up(){
        window.addEventListener("mouseup",this.handleUp)
    }

    upfn(event){
        if(event.button == 0){
            this.left.setFlag(false)
        }
        else if(event.button == 1) {
            this.center.setFlag(false)
        }
        else if(event.button == 2){
            this.right.setFlag(false)
            this.right.hideRotateImg()
        }
    }

    wheel(){
        window.addEventListener("mousewheel", this.handleWheel)
    }
    wheelfn(event){
        this.center.move(event,this)
    }

    updateDom(){
        let { currentWidth,currentHeight } =  storeToRefs(this.store)
        canvas2Dcontainer.children.forEach(sprite=>{
            // console.log('缩放系数',container.scale)
            // console.log('bgcontainer中心位置',container.getGlobalPosition().x - currentWidth.value/2,container.getGlobalPosition().y - currentHeight.value/2)
            // console.log('container中心位置',container.getGlobalPosition())
            // console.log('旋转',container.rotation)
            $bus.emit('domSprite', Object.assign(
                {},
                {
                    rotate:container.rotation,
                    dom:sprite.dom
                },
                container.scale,
                sprite.getGlobalPosition()
            ));
        })
    }


    destroy(){
        window.removeEventListener('mousedown',this.handleDown)
        window.removeEventListener('mouseup', this.handleUp)
        window.removeEventListener('mousemove', this.handleMove)
        window.removeEventListener("mousewheel", this.handleWheel)
    }

    static init(showCoord=false){
        return new MouseControle(showCoord)

        let store = pixiStore()
        let { _mouseControle } = store
        if(_mouseControle){
            _mouseControle.down()
            _mouseControle.move()
            _mouseControle.up()
            _mouseControle.wheel()
            return toRaw(_mouseControle)
        }else{
            store.changeMouseControle(new MouseControle(showCoord))
            return toRaw(store._mouseControle)
        }
    }
}

*/

/*MouseControleBack*/
